<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>namespace模式</title>
</head>
<body>
    <!-- namespace模式 : 简单对象封装 -->
        <!-- 作用：减少了全局变量，解决了命名冲突的问题 -->
        <!-- 问题：数据不安全（外部可以修改模块内部的状态/属性） -->
        <script>
            let moduleA = {
                data: '我是模块A里面的数据',
                fn1() {
                    console.log(`fn1: ${this.data}`)
                },
                fn2() {
                    console.log(`fn2: ${this.data}`)
                }
            }
            moduleA.fn1()
            moduleA.data = '我修改了模块A里面的数据'
            moduleA.fn1()
        </script>
</body>
</html> 